<!-- NOTE: -->
<!-- 
		Make sure menu buttons stay constant throughout all html pages
 -->



<HTML>

<HEAD>
	<title>HandsFree</title>
	
	<!-- CSS -->
	<link type="text/css" rel="stylesheet" href="Template.css"/>
	<link type="text/css" rel="stylesheet" href="LiveAttendenceView.css"/>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>	<!-- need this api -->
	<script type="text/javascript" src="./LiveAttendanceView.js"></script>
	<script type="text/javascript" src="./stub/crud/template/mustache.js"></script>
	
	<!-- FONT -->
	<link href='http://fonts.googleapis.com/css?family=Cutive|Open+Sans' rel='stylesheet' type='text/css'>
</HEAD>

<BODY>

	<div id="sidebar">
		<div id="menu">
			<div id="logo">
				<ul>
					<li id="l1">Hands</li>
					<li id="l2">Free</ul>
				<p>A Ticketmaster Project by A-Team</p>
			</div>
				
			<div id="menu-buttons">
				<ul>
					<a href="Home.html"><li>Home</li></a>
					<a href="QRcode.html"><li>Scan Yourself In</li></a>
					<a href="Enroll.html"><li>Buy A Ticket Today!</li></a>
					<a href="ApplyForEvent.html"><li>Sign Up For An Event</li></a>
					<a href="LiveAttendanceView.html"><li>Real-Time Roster</li></a>
					<a href="ScanStream.html"><li>Scan Stream</li></a>
					<a href="EventHistory.html"><li>Event History</li></a>
				</ul>
			</div>
			<div id="menu-content">
				<p>Welcome to our Live Attendance page! <br>
				Use this page to view the real-time status of all users currently signed up for an event. Green indicates that they are
				currently in the venue while red indicates that they have not yet entered, or have already exited.</p>
			</div>
		</div>
		<div id="border"></div>
	</div>
	
	<div id="content">
		<table>
			<tr>
				<td class="centered"  colspan="5">
					<div id="title-wrapper">
						<div id="title">
							Choose An Event
						</div>		
					</div>
				</td>
			</tr>
			
			<tr>
				<td id ="loadgif" class="centered"  colspan="5">
					<div>
						<img src="./loading_spinner.gif" alt="loading..."></img>
					</div>
				</td>
			</tr>
			
			<tr><td><div style="height:50px;"></td></div></tr>
		</table>
		<table id="rosterTable">
		</table>
	</div>

</BODY>
</HTML>